<!--作课程管理
修改人：彭心愉  -->
<template>
<hr class="langHr">
<hr class="shortHr">
<div>
    <div class="search">
        <el-button color="#3e94ad" class="btn addBtn" @click="add"> <span><img style="width: 20px ; height: 20px; margin-top: 2px; padding-right: 5px;"  src="@/assets/icon/add.png" alt=""></span> 增加</el-button>
         <el-row :gutter="20">
         <el-date-picker
         class="w-50 m-2"
          v-model="time"
          type="date"
          placeholder="申请提交日期"
          :default-value="new Date()"
        />
            <!-- <el-input v-model="time" class="w-50 m-2 inputtext"  placeholder="申请提交日期" :suffix-icon="Calendar"/> -->
         </el-row>
        <el-row :gutter="20">
            <el-input v-model="itemname" class="w-50 m-2 inputtext"  placeholder="项目名称"/>
        </el-row>
        <el-row :gutter="20">
            <el-input class="inputtext" v-model="trainingTeacher" placeholder="实训老师"/>
        </el-row>
        <el-row :gutter="20">
            <el-input class="inputtext" v-model="dutyTeacher" placeholder="责任老师"/> 
        </el-row>
        <el-button color="#3e94ad" class="btn" >查询</el-button>
        <!-- <el-button color="#3e94ad" class="btn" >删除</el-button> -->

        <el-button color="#ffffff" class="resetBtn"  >重置</el-button>
    </div>
    <!-- <div class="list">
        <suspense>
            <template #default>
                <List></List>
            </template>
            <template #fallback>
                <div>
                    正在加载中。。。
                </div>
            </template>
        </suspense>
    </div> -->
        <div class="list">
                <table width="100%"  id="courseInfoTable" >
                    <tr>
                        <th v-for="(item,num) in lessonManagementTitle" :key="num">{{item}}</th>
                    
                    </tr>
                    <tr align="center" v-for="i in 8" :key="i">
                        <td>2022/04/20</td>
                        <td>考勤系统</td>
                        <td>张老师</td>
                        <td>王老师</td>
                        <td> 13:00:00</td>
                        <td>15:00:00</td>
                        <td>7605</td>
                        <td>请带电脑</td>
                        <td class="last-td">
                            <a  href="#" @click="team">学员明细</a>
                            <a href="#">编辑</a>
                            <a href="#">删除</a>
                            <a href="#">复制</a>
                            </td>
                    </tr>
                </table>

    </div>

        <!-- 弹窗 -->
        <div class=" el-overlay is-message-box" v-if="pageShow">
            <div class="addpage">
                <Add-course @closeclick="closeclick"></Add-course>
            </div>
        </div>
        <div class=" el-overlay is-message-box" v-if="pageShow1">
            <div class="addpage">
                <Team-course @closeclickTeam="closeclickTeam"></Team-course>
            </div>
        </div>
        <!-- 分页 -->
        <Pagination/>



</div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { Calendar } from '@element-plus/icons-vue'
import { defineAsyncComponent,ref,reactive  } from 'vue'
import AddCourse from '@/views/Course/AddCourse.vue'
import Pagination from '@/components/Pagination'
import TeamCourse from './TeamCourse.vue'
export default{
    name:'CourseInfo',
    components:{
    // List: defineAsyncComponent(() => import("@/components/List")),
    Pagination,
    AddCourse,
    TeamCourse
},
    setup(){
            const lessonManagementTitle=reactive(['日期','项目名称','实训老师','责任老师','签到时间','签退时间','教室','备注','操作'])
            // console.log(t);
            let lessonManagementList =reactive([
                {id:1,projectName:''}
            ])


            let pageShow = ref(false)
            let pageShow1 = ref(false)
            const itemname = ref('')
            const time = ref('')
            const trainingTeacher = ref('')
            const dutyTeacher = ref('')

            const router =  useRouter()
            const route = useRoute()            
            function add() {
                pageShow.value=true
            }

            function team() {
                pageShow1.value=true
            }
           function closeclick(isclose){
               if(isclose==false){
                   pageShow.value=false
               }
            }

           function closeclickTeam(isclose){
               if(isclose==false){
                   pageShow1.value=false
               }
            }

            return{
                itemname,
                time,
                trainingTeacher,
                dutyTeacher,
                Calendar,
                closeclick,
                closeclickTeam,
                add,
                pageShow,
                pageShow1,
                open,
                lessonManagementTitle,
                lessonManagementList,
                team
            }
    }
}
</script>

<style lang="less" scoped>
       .langHr{
                    margin:0 60px;
                    border: 1px solid rgb(194, 218, 226);
                    margin-top: 90px;
                    background-color: rgb(194, 218, 226);
                }
                .shortHr{
                    margin-left: 60px;
                    width: 200px;
                    border: 4px solid rgb(62, 148, 173);
                    margin-top: -4px;
                    border-radius: 20px;
                    background-color: rgb(62, 148, 173);

                }
    .search{
        display: flex;
        margin:0 70px;
        margin-top: 20px;
        justify-content: space-between;
        .inputtext{
            margin-right: 10px;
        }
        .btn{
            margin-right: -40px;
            
        }
        .addBtn{
            margin-right: 10px;
        }
        .resetBtn{
            border: 1px #999 solid;
        }
    }

.list{
        width: 1200px;
        margin: auto;
        margin-top: 20px;
        // border: 1px #999 solid;
        #courseInfoTable{
            border-collapse: collapse;
            tr{
               
                td,th{
                    width: 140px;
                    height: 50px;
                }
                .last-td{
                    width: 240px;
                    a{
                        margin-right: 5px;
                    }
                }
            }
            tr:nth-child(2n-1) {
                background-color: #c2dae2;
            }
            
            tr:hover {
                background-color: rgb(214, 209, 209);
            }
        }
    }

    .addpage{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>